<template>
    <el-header id="home-header">
        <el-row>
            <el-menu :default-active="activeIndex2" 
            class="el-menu-demo" mode="horizontal" 
            @select="handleSelect" 
            background-color="#545c64" 
            text-color="#fff" 
            active-text-color="#ffd04b">
                <el-menu-item index="/">首页</el-menu-item>
                <el-menu-item index="articlelist">新闻</el-menu-item>
                <!-- <el-submenu index="articles">
                    <template slot="title">文章</template>
                    <el-menu-item index="article">文章分类</el-menu-item>
                    <el-menu-item index="articlelist">文章列表</el-menu-item>
                </el-submenu> -->
                <el-menu-item index="product">产品</el-menu-item>
                <el-menu-item index="news">消息中心</el-menu-item>
            </el-menu>
        </el-row>
    </el-header>
</template>
<script>
    export default {
        data() {
            return {
                activeIndex: "1",
                activeIndex2: "2",
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push(key)
            },
        },
    };
</script>
<style lang="scss" scoped>
    #home-header {
        width: 100%;
        user-select: none;
    }
</style>